<template>
  <div>
    <h1>v-for的使用,主要用于循环生成动态结构</h1>
    <table>
      <tr>
        <th>name</th>
        <th>年龄</th>
        <th>性别</th>
        <th>地址</th>
      </tr>
      <tr v-for="(value, index) in list" :key="index">
        <td>{{ value.name }}</td>
        <td>{{ value.age }}</td>
        <td>{{ value.gender }}</td>
        <td>{{ value.address }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "jack",
          age: 20,
          gender: "男",
          address: "广州",
        },
        {
          name: "rose",
          age: 18,
          gender: "女",
        },
        {
          name: "tom",
          age: 19,
          gender: "男",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
p {
  color: #da70ca;
}
table {
  text-align: center;
  width: 300px;
  border: 1px #000 solid;
  td,
  th {
    border: 1px #000 solid;
  }
}
</style>
